<template>
  <div>
    <div class="cover-top detail-top">
      <div class="cover-left">
        <router-link :to="'/'">
          <i class="iconfont icon-zuobian"></i>
        </router-link>
      </div>
      <div class="detail-title">
        <h1>渟说</h1>
      </div>
      <div class="cover-right">
        <i class="iconfont icon-gengduo" @click="openDialog"></i>
      </div>
    </div>
    <div class="detail-content">
      <div class="userFeedContentSub">
        <div class="userFeedTop">
          <div class="userFeedTopLeft">
            <div class="userFeedTopAvatar">
              <img :src="avatar" alt="">
            </div>
            <div class="userFeedTopright">
              <p class="userFeedToprightName">{{nickname}}</p>
              <p>2018-05-22</p>
            </div>
          </div>
          <div class="userFeedRight active">
            <button class="btn btn-light" style="display: none">
              <i class="iconfont icon-dagou1"></i>
              已关注
            </button>
            <button class="btn btn-primary">
              <i class="iconfont icon-aixin"></i>
              关注
            </button>
          </div>
        </div>
        <div class="userFeedSub">
          <p class="userFeedSubText">{{text}}</p>
        </div>
      </div>
      <div class="detail-img">
        <ul>
          <li v-for="(item,index) in pic" :key="item" >
            <figure :style="{ 'background-image': 'url(' + item + ')','background-repeat':'no-repeat','background-size':'cover' }" @click="bigImg(index)"></figure>
          </li>
        </ul>
        <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
          <svg class="icon prev" aria-hidden="true" @click.stop="prev">
            <use xlink:href="#icon-zuoyoujian1"></use>
          </svg>
            <div class="showImg" >
              <img class="bigImg" :src="pic[num]">
            </div>
          <svg class="icon next" aria-hidden="true" @click.stop="next">
            <use xlink:href="#icon-zuoyoujian"></use>
          </svg>
        </div>
      </div>
      <div class="detail-group">
        <button class="btn btn-primary" v-for="item in groups" :key="item.group_id">
          <i class="iconfont icon-quanzi-copy"></i>
          {{item.title}}
        </button>
      </div>
      <div class="detail-share">
        <a href="">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weixin"></use>
          </svg>
          <span>微信好友</span>
        </a>
        <a href="">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-pengyouquan"></use>
          </svg>
          <span>朋友圈</span>
        </a>
      </div>
    </div>
    <my-eject :isShow="isShowShareDialog" @on-close="closeDialog('isShowShareDialog')">
      <share></share>
    </my-eject>
  </div>
</template>

<script>
import axios from 'axios'
import MyEject from './eject'
import share from './share'

export default {
  components: {
    MyEject,
    share
  },
  name: 'detail-top',
  data () {
    return {
      pic: [],
      groups: [],
      user: [],
      avatar: '',
      nickname: '',
      text: '',
      isShowShareDialog: false,
      showBigImg: false,
      num: 0
    }
  },
  methods: {
    UserHomeInfo () {
      axios({
        method: 'post',
        url: 'https://bird.ioliu.cn/v2',
        params: {
          url: 'http://api.sns.sunnycare.cc/v1/feed/record'
        },
        data: {
          feed_id: 'F00003'
        }
      }).then(this.getHomeInfoSucc)
        .catch(function (error) {
          if (error.res) {
            console.log(error.res.data);
            console.log(error.res.status);
            console.log(error.res.headers);
          } else {
            console.log('Error',error.message);
          }
          console.log(error.config)
        })
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.code && res.data) {
        const data = res.data
        this.pic = data.pic
        this.groups = data.groups
        this.user = data.user
        this.text = data.text
        this.avatar = res.data.user.avatar
        this.nickname = res.data.user.nickname
        this.text = res.data.text
      }
    },
    openDialog () {
      this.isShowShareDialog = true
    },
    closeDialog (attr) {
      this[attr] = false
    },
    bigImg (index) {
      this.showBigImg = true
      this.num = index
    },
    prev () {
      if (this.num === 0) {
        this.num = 6
      }
      this.num--
      // console.log(this.num)
    },
    next () {
      if (this.num === 5) {
        this.num = -1
      }
      this.num++
    },
    AddIntercept () {
      axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        console.log('开始请求')
        console.log(`请求地址: ${config.url}`)
        return config
      }, function (error) {
        // Do something with request error
        console.log('请求失败')
        return Promise.reject(error)
      })
      axios.interceptors.response.use(function (config) {
        // Do something before request is sent
        console.log('接收响应')
        return config
      }, function (error) {
        // Do something with request error
        console.log('响应出错')
        return Promise.reject(error)
      })
    }
  },
  mounted () {
    this.UserHomeInfo()
    this.AddIntercept()
  }
}
</script>

<style scoped>
  .detail-top {
    background-color: #4dc6ff;
    position: fixed;
    width: 100%;
    top: 0;
  }

  .detail-title > h1 {
    font-size: 16px;
    color: #fff;
  }

  .detail-content {
    margin: 10% 0 3% 0;
  }

  .cover-top {
    display: flex;
    align-items: center;
    z-index: 9;
    height: 40px;
    justify-content: space-between
  }

  .cover-top .cover-left {
    display: flex;
    justify-content: flex-start;
    padding-left: 12px;
  }

  .cover-top .cover-left .iconfont {
    color: #fff;
    font-size: 20px;
  }

  .cover-top .cover-right {
    display: flex;
    justify-content: flex-end;
    padding-right: 12px;
  }

  .cover-top > div > i {
    font-size: 20px;
    color: #fff;
  }

  .userFeedContentSub {
    background-color: #fff;
  }

  .userFeedTop {
    display: flex;
    justify-content: space-between;
    padding: 3% 7%;
    border-bottom: 1px #efefef solid;
  }

  .userFeedTopLeft {
    display: flex;
    align-items: center;
  }

  .userFeedTopAvatar {
    display: flex;
    justify-content: flex-start;
    width: 48px;
    height: 48px;
  }

  .userFeedTopAvatar > img {
    width: 48px;
    height: 48px;
  }

  .userFeedTopright {
    display: flex;
    flex-direction: column;
  }

  .userFeedTopright > p {
    margin-left: 12px;
    line-height: 1.5;
  }

  .userFeedToprightName {
    font-size: 14px;
  }

  .userFeedRight {
    display: flex;
    align-items: center;
  }

  .userFeedSub {
    padding: 2% 7%;
  }

  .userFeedSub > p {
    width: 100%;
    padding: 2% 0;
    font-size: 1rem;
    line-height: 16px;
  }

  .userFeedSub > p > img {
    max-width: 100%;
  }

  .userFeedSub > .userFeedSubImg > span {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    left: 0;
    padding: 2% 7%;
    color: #fff;
  }

  .detail-img {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 7%;
    background-color: #fff;
  }

  .detail-img > ul {
    display: flex;
    flex-wrap: wrap;
  }

  .detail-img > ul > li {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5% 5% 0;
    height: 100px;
    overflow: hidden;
  }

  .detail-img > ul > li:nth-child(3n) {
    margin-right: 0;
  }

  .detail-img > ul > li > figure {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100%;
  }

  .detail-img > ul > li > img {
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 100%;*/
    height: 100%;
  }

  .detail-group {
    display: flex;
    align-items: center;
    padding: 2% 7% 5%;
    background-color: #fff;
    border-bottom: 1px #efefef solid
  }

  .detail-group > button {
    padding: .1rem 1.5rem;
    display: flex;
    align-items: center;
    margin-right: 7px;
  }

  .detail-group > button > i {
    display: flex;
    align-items: center;
    margin-right: 7px;
  }

  .detail-share {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #fff;
  }

  .detail-share > a {
    display: flex;
    align-items: center;
    width: 50%;
    justify-content: center;
    font-size: 16px;
  }

  .detail-share > a > svg {
    margin-right: 7px;
    width: 24px;
    height:50px;
  }

  .detail-share > a > span {
    color: #333;
  }
  .imgMask{
    position: absolute;
    height: 100%;
    width:100%;
    top:0;
    left:0;
    z-index: 100;
    background:rgba(0,0,0,.6);
  }
  .showImg{
    height:auto;
    width:300px;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:10px solid #fff;
  }
  .bigImg{
    width:100%;
    height:100%;
  }
  .prev{
    position: absolute;
    top:50%;
    left:10px;
    width:40px;
    transform:translate(10px,-50%);
  }
  .next{
    width:40px;
    transform:translate(10px,-50%);
    position: absolute;
    top:50%;
    right:20px;
  }
</style>
